<template>
    <div class="responsive-three-column-page">
        <div class="page-header">
            <h1 class="page-title">内容管理系统</h1>
            <p class="page-subtitle">浏览和管理各类内容</p>
        </div>

        <div class="main-content">
            <!-- 分类列表 -->
            <div
                class="column category-column card"
                :class="{
                    'mobile-hidden': isMobile && activeSection !== 'category',
                }"
            >
                <div class="column-header">
                    <h2>📚 分类目录</h2>
                    <button
                        class="close-btn mobile-only"
                        @pointerdown="setActiveSection('')"
                    >
                        ✕
                    </button>
                </div>

                <div class="category-list">
                    <div
                        v-for="category in categories"
                        :key="category.id"
                        :class="[
                            'category-item',
                            { active: activeCategory.id === category.id },
                        ]"
                        @pointerdown="selectCategory(category)"
                    >
                        <div class="category-icon">{{ category.icon }}</div>
                        <div class="category-info">
                            <h3 class="category-name">{{ category.name }}</h3>
                            <p class="category-count">
                                {{ category.count }} 个项目
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 内容列表 -->
            <div
                class="column content-list-column card"
                :class="{
                    'mobile-hidden':
                        isMobile && activeSection !== 'content-list',
                }"
            >
                <div class="column-header">
                    <h2>📋 内容列表</h2>
                    <button
                        class="close-btn mobile-only"
                        @pointerdown="setActiveSection('')"
                    >
                        ✕
                    </button>
                </div>

                <div class="search-bar">
                    <input
                        type="text"
                        v-model="searchQuery"
                        placeholder="搜索内容..."
                        class="search-input"
                    />
                    <button class="search-btn">🔍</button>
                </div>

                <div class="content-list">
                    <div
                        v-for="item in paginatedContent"
                        :key="item.id"
                        :class="[
                            'content-item',
                            {
                                active:
                                    activeContent &&
                                    activeContent.id === item.id,
                            },
                        ]"
                        @pointerdown="selectContent(item)"
                    >
                        <div class="content-thumbnail">
                            <img :src="item.thumbnail" :alt="item.title" />
                        </div>
                        <div class="content-info">
                            <h3 class="content-title">{{ item.title }}</h3>
                            <p class="content-excerpt">{{ item.excerpt }}</p>
                            <div class="content-meta">
                                <span class="content-date">{{
                                    formatDate(item.date)
                                }}</span>
                                <span class="content-category">{{
                                    item.category
                                }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 分页控件 -->
                <div class="pagination">
                    <button
                        class="pagination-btn"
                        :disabled="currentPage === 1"
                        @pointerdown="changePage(currentPage - 1)"
                    >
                        上一页
                    </button>

                    <span class="pagination-info">
                        第 {{ currentPage }} 页，共 {{ totalPages }} 页
                    </span>

                    <button
                        class="pagination-btn"
                        :disabled="currentPage === totalPages"
                        @pointerdown="changePage(currentPage + 1)"
                    >
                        下一页
                    </button>
                </div>
            </div>

            <!-- 内容展示 -->
            <div
                class="column content-detail-column card"
                :class="{
                    'mobile-hidden':
                        isMobile && activeSection !== 'content-detail',
                }"
            >
                <div class="column-header">
                    <h2>📰 内容详情</h2>
                    <button
                        class="close-btn mobile-only"
                        @pointerdown="setActiveSection('')"
                    >
                        ✕
                    </button>
                </div>

                <div v-if="activeContent" class="content-detail">
                    <div class="detail-header">
                        <h1 class="detail-title">{{ activeContent.title }}</h1>
                        <div class="detail-meta">
                            <span class="detail-date">{{
                                formatDate(activeContent.date)
                            }}</span>
                            <span class="detail-category">{{
                                activeContent.category
                            }}</span>
                            <span class="detail-author"
                                >作者: {{ activeContent.author }}</span
                            >
                        </div>
                    </div>

                    <div class="detail-image">
                        <img
                            :src="activeContent.image"
                            :alt="activeContent.title"
                        />
                    </div>

                    <div
                        class="detail-content"
                        v-html="activeContent.content"
                    ></div>

                    <div class="detail-actions">
                        <button class="action-btn edit-btn">编辑内容</button>
                        <button class="action-btn delete-btn">删除内容</button>
                    </div>
                </div>

                <div v-else class="no-content">
                    <div class="no-content-icon">📰</div>
                    <h3>请选择内容</h3>
                    <p>从内容列表中选择一项以查看详细信息</p>
                </div>
            </div>
        </div>

        <!-- 移动端导航 -->
        <div v-if="isMobile" class="mobile-navigation">
            <button
                :class="['nav-btn', { active: activeSection === 'category' }]"
                @pointerdown="setActiveSection('category')"
            >
                📚 分类
            </button>
            <button
                :class="[
                    'nav-btn',
                    { active: activeSection === 'content-list' },
                ]"
                @pointerdown="setActiveSection('content-list')"
            >
                📋 列表
            </button>
            <button
                :class="[
                    'nav-btn',
                    { active: activeSection === 'content-detail' },
                ]"
                @pointerdown="setActiveSection('content-detail')"
            >
                📰 详情
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';

// 定义props
const props = defineProps<{
    ujt: any;
}>();

// 响应式数据
const isMobile = ref(false);
const activeSection = ref('');
const activeCategory = ref({ id: 0, name: '全部分类', icon: '📂', count: 0 });
const activeContent = ref(null);
const searchQuery = ref('');
const currentPage = ref(1);
const itemsPerPage = ref(5);

// 模拟分类数据
const categories = ref([
    { id: 0, name: '全部分类', icon: '📂', count: 42 },
    { id: 1, name: '技术文章', icon: '💻', count: 12 },
    { id: 2, name: '产品介绍', icon: '📦', count: 8 },
    { id: 3, name: '行业资讯', icon: '📰', count: 15 },
    { id: 4, name: '用户案例', icon: '👥', count: 7 },
    { id: 5, name: '开发文档', icon: '📝', count: 20 },
    { id: 6, name: '更新日志', icon: '🔄', count: 5 },
    { id: 7, name: '常见问题', icon: '❓', count: 9 },
]);

// 模拟内容数据
const contentItems = ref([
    {
        id: 1,
        title: 'Vue 3 Composition API 最佳实践',
        excerpt: '深入了解Vue 3 Composition API的使用技巧和最佳实践...',
        category: '技术文章',
        date: '2023-06-15',
        author: '张三',
        thumbnail: 'https://picsum.photos/seed/vue/100/100',
        image: 'https://picsum.photos/seed/vue/800/400',
        content:
            '<p>Vue 3 Composition API 是 Vue 3 中引入的一种新的组织和重用逻辑的方式。它提供了一种更灵活的方式来组织组件逻辑，特别适用于大型应用和复杂组件。</p><p>与 Options API 相比，Composition API 允许我们将相关的逻辑组织在一起，而不是按照选项类型（如 data、methods、computed 等）来分割。这使得代码更易于理解和维护。</p><h3>核心概念</h3><p>Composition API 的核心是 setup() 函数，它是组件的入口点。在 setup() 中，我们可以使用 reactive()、ref()、computed() 等函数来创建响应式数据和计算属性。</p>',
    },
    {
        id: 2,
        title: '响应式设计在现代Web开发中的应用',
        excerpt: '探讨响应式设计原则及其在现代Web开发中的重要性...',
        category: '技术文章',
        date: '2023-07-22',
        author: '李四',
        thumbnail: 'https://picsum.photos/seed/responsive/100/100',
        image: 'https://picsum.photos/seed/responsive/800/400',
        content:
            '<p>响应式设计已成为现代Web开发的标准实践。随着设备种类的不断增加，从手机到平板再到桌面显示器，网站需要能够在各种屏幕尺寸上提供良好的用户体验。</p><p>响应式设计不仅仅是调整布局，它还涉及到内容策略、图像优化、性能优化等多个方面。通过使用媒体查询、弹性网格和可伸缩图像，我们可以创建适应不同设备的网站。</p><h3>关键原则</h3><p>1. 移动优先：从最小屏幕开始设计，然后逐步增强<br>2. 弹性布局：使用相对单位而非固定像素<br>3. 媒体查询：针对不同断点应用不同样式<br>4. 图像优化：为不同设备提供合适的图像尺寸</p>',
    },
    {
        id: 3,
        title: '新一代企业级CMS系统发布',
        excerpt: '介绍我们最新发布的企业级内容管理系统的主要特性和优势...',
        category: '产品介绍',
        date: '2023-08-05',
        author: '王五',
        thumbnail: 'https://picsum.photos/seed/cms/100/100',
        image: 'https://picsum.photos/seed/cms/800/400',
        content:
            '<p>我们很高兴地宣布新一代企业级内容管理系统正式发布！该系统专为中大型企业设计，提供了强大的内容管理功能和灵活的扩展能力。</p><h3>主要特性</h3><ul><li>多站点管理：支持同时管理多个网站</li><li>多语言支持：内置多语言切换功能</li><li>权限管理：细粒度的用户权限控制系统</li><li>工作流引擎：自定义内容发布流程</li><li>API集成：丰富的API接口便于系统集成</li></ul><p>新系统采用现代化的技术架构，基于Vue 3和Node.js构建，具有出色的性能和可扩展性。</p>',
    },
    {
        id: 4,
        title: '2023年Web开发趋势分析',
        excerpt: '分析当前Web开发领域的主要趋势和技术发展方向...',
        category: '行业资讯',
        date: '2023-08-18',
        author: '赵六',
        thumbnail: 'https://picsum.photos/seed/trends/100/100',
        image: 'https://picsum.photos/seed/trends/800/400',
        content:
            '<p>随着技术的不断发展，Web开发领域也在快速演进。让我们来看看2023年值得关注的主要趋势。</p><h3>前端框架</h3><p>React、Vue和Angular仍然是主流选择，但新兴框架如Svelte和Solid.js正在获得更多关注。这些框架通过编译时优化提供了更好的性能。</p><h3>构建工具</h3><p>Vite已经成为许多开发者的首选构建工具，其快速的冷启动和热更新能力大大提升了开发体验。同时，Rust生态的工具如SWC也在编译性能方面表现出色。</p><h3>全栈开发</h3><p>一体化解决方案如Next.js、Nuxt.js和SvelteKit越来越受欢迎，它们简化了全栈应用的开发流程。</p>',
    },
    {
        id: 5,
        title: '电商平台性能优化案例',
        excerpt: '分享我们为某大型电商平台进行性能优化的成功经验...',
        category: '用户案例',
        date: '2023-09-02',
        author: '孙七',
        thumbnail: 'https://picsum.photos/seed/ecommerce/100/100',
        image: 'https://picsum.photos/seed/ecommerce/800/400',
        content:
            '<p>我们为某知名电商平台实施了全面的性能优化项目，成功将页面加载时间从4.2秒降低到1.8秒，转化率提升了15%。</p><h3>优化策略</h3><p>1. 图像优化：采用WebP格式并实施懒加载<br>2. 代码分割：按路由分割JavaScript包<br>3. 缓存策略：优化HTTP缓存和Service Worker<br>4. 服务端渲染：关键页面实施SSR<br>5. CDN优化：全球CDN节点部署</p><h3>成果</h3><p>通过以上优化措施，不仅提升了用户体验，还显著降低了服务器负载，为客户节省了30%的基础设施成本。</p>',
    },
    {
        id: 6,
        title: 'API设计规范v2.1更新说明',
        excerpt: 'API设计规范的最新更新内容和使用指南...',
        category: '开发文档',
        date: '2023-09-15',
        author: '周八',
        thumbnail: 'https://picsum.photos/seed/api/100/100',
        image: 'https://picsum.photos/seed/api/800/400',
        content:
            '<p>我们发布了API设计规范v2.1版本，主要更新包括：</p><h3>新增内容</h3><ul><li>RESTful API设计最佳实践</li><li>GraphQL API设计指南</li><li>错误处理标准</li><li>版本控制策略</li><li>安全认证机制</li></ul><h3>变更内容</h3><p>1. 废弃了v1版本中的部分字段<br>2. 更新了认证流程，推荐使用JWT<br>3. 统一了响应格式<br>4. 增加了限流策略说明</p><p>请所有开发团队按照新规范进行API开发，现有API请逐步迁移。</p>',
    },
    {
        id: 7,
        title: '系统维护通知（2023年9月）',
        excerpt: '计划于9月25日进行系统维护升级的通知...',
        category: '更新日志',
        date: '2023-09-20',
        author: '吴九',
        thumbnail: 'https://picsum.photos/seed/maintenance/100/100',
        image: 'https://picsum.photos/seed/maintenance/800/400',
        content:
            '<p>为了提供更好的服务体验，我们计划于2023年9月25日（周一）凌晨2:00-6:00进行系统维护升级。</p><h3>维护内容</h3><ul><li>数据库性能优化</li><li>安全补丁更新</li><li>新功能上线</li><li>服务器硬件升级</li></ul><h3>影响范围</h3><p>维护期间系统将暂时无法访问，请提前做好相关安排。我们将通过短信和邮件及时通知维护进度。</p><p>如有任何疑问，请联系技术支持：support@example.com</p>',
    },
    {
        id: 8,
        title: '如何处理跨域问题？',
        excerpt: '常见跨域问题的解决方案和最佳实践...',
        category: '常见问题',
        date: '2023-09-22',
        author: '郑十',
        thumbnail: 'https://picsum.photos/seed/cors/100/100',
        image: 'https://picsum.photos/seed/cors/800/400',
        content:
            '<p>跨域问题是在Web开发中经常遇到的问题，本文将介绍几种常见的解决方案。</p><h3>什么是跨域</h3><p>跨域是指浏览器出于安全考虑，限制不同源之间的资源访问。同源策略要求协议、域名、端口都相同。</p><h3>解决方案</h3><p>1. CORS（跨域资源共享）：服务端设置响应头<br>2. 代理服务器：通过同源服务器代理请求<br>3. JSONP：利用script标签不受同源策略限制<br>4. postMessage：HTML5提供的跨文档通信API</p><h3>最佳实践</h3><p>推荐使用CORS方案，它是最标准和安全的解决方案。避免使用JSONP，因为它只支持GET请求且存在安全风险。</p>',
    },
]);

// 计算属性
const filteredContent = computed(() => {
    let result = contentItems.value;

    // 按分类过滤
    if (activeCategory.value.id !== 0) {
        result = result.filter(
            (item) => item.category === activeCategory.value.name
        );
    }

    // 按搜索查询过滤
    if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase();
        result = result.filter(
            (item) =>
                item.title.toLowerCase().includes(query) ||
                item.excerpt.toLowerCase().includes(query) ||
                item.content.toLowerCase().includes(query)
        );
    }

    return result;
});

const totalPages = computed(() => {
    return Math.ceil(filteredContent.value.length / itemsPerPage.value);
});

const paginatedContent = computed(() => {
    const start = (currentPage.value - 1) * itemsPerPage.value;
    const end = start + itemsPerPage.value;
    return filteredContent.value.slice(start, end);
});

// 方法
const selectCategory = (category: any) => {
    activeCategory.value = category;
    currentPage.value = 1;
    activeContent.value = null;

    if (isMobile.value) {
        setActiveSection('content-list');
    }
};

const selectContent = (content: any) => {
    activeContent.value = content;

    if (isMobile.value) {
        setActiveSection('content-detail');
    }
};

const changePage = (page: number) => {
    currentPage.value = page;
    window.scrollTo({ top: 0, behavior: 'smooth' });
};

const formatDate = (dateString: string) => {
    const options: Intl.DateTimeFormatOptions = {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
    };
    return new Date(dateString).toLocaleDateString('zh-CN', options);
};

const setActiveSection = (section: string) => {
    activeSection.value = section;
};

const checkDevice = () => {
    isMobile.value = window.innerWidth <= 768;
    if (!isMobile.value) {
        activeSection.value = '';
    }
};

// 生命周期钩子
onMounted(() => {
    checkDevice();
    window.addEventListener('resize', checkDevice);
});

onUnmounted(() => {
    window.removeEventListener('resize', checkDevice);
});
</script>

<style scoped lang="scss">
.responsive-three-column-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
    padding: 20px;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    .page-header {
        text-align: center;
        margin-bottom: 30px;

        .page-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin: 0 0 10px 0;
            background: linear-gradient(90deg, #4b6cb7, #182848);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .page-subtitle {
            font-size: 1.2rem;
            color: #666;
            margin: 0;
            font-weight: 300;
        }
    }

    .main-content {
        display: flex;
        flex: 1;
        gap: 20px;
        height: calc(100vh - 180px);
    }

    .column {
        display: flex;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        border-radius: 16px;
        padding: 20px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.5);
        overflow: hidden;
    }

    .card {
        transition: all 0.3s ease;

        &:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }
    }

    .column-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;

        h2 {
            margin: 0;
            font-size: 1.4rem;
            font-weight: 600;
            color: #333;
        }

        .close-btn {
            display: none;
            background: #f0f0f0;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.2s ease;

            &:hover {
                background: #e0e0e0;
            }
        }
    }

    // 分类列表样式
    .category-column {
        flex: 0 0 280px;

        .category-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
            overflow-y: auto;
            flex: 1;

            .category-item {
                display: flex;
                align-items: center;
                padding: 15px;
                border-radius: 12px;
                cursor: pointer;
                transition: all 0.3s ease;
                background: rgba(245, 245, 245, 0.7);

                &:hover {
                    background: #e8f4ff;
                    transform: translateX(5px);
                }

                &.active {
                    background: linear-gradient(90deg, #4b6cb7, #182848);
                    color: white;
                    box-shadow: 0 4px 15px rgba(75, 108, 183, 0.3);
                }

                .category-icon {
                    font-size: 1.5rem;
                    margin-right: 15px;
                    width: 40px;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .category-info {
                    .category-name {
                        font-size: 1.1rem;
                        font-weight: 500;
                        margin: 0 0 5px 0;
                    }

                    .category-count {
                        font-size: 0.9rem;
                        margin: 0;
                        color: #666;
                    }
                }

                &.active .category-count {
                    color: rgba(255, 255, 255, 0.8);
                }
            }
        }
    }

    // 内容列表样式
    .content-list-column {
        flex: 1;

        .search-bar {
            display: flex;
            margin-bottom: 20px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

            .search-input {
                flex: 1;
                padding: 15px 20px;
                border: none;
                background: rgba(245, 245, 245, 0.7);
                font-size: 1rem;

                &:focus {
                    outline: none;
                    background: white;
                }
            }

            .search-btn {
                padding: 0 25px;
                background: #4b6cb7;
                color: white;
                border: none;
                cursor: pointer;
                font-size: 1.2rem;
                transition: all 0.3s ease;

                &:hover {
                    background: #3a5ca9;
                }
            }
        }

        .content-list {
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 15px;

            .content-item {
                display: flex;
                padding: 15px;
                border-radius: 12px;
                cursor: pointer;
                transition: all 0.3s ease;
                background: rgba(245, 245, 245, 0.7);
                border: 1px solid #eee;

                &:hover {
                    background: #e8f4ff;
                    transform: translateY(-3px);
                    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
                }

                &.active {
                    border-color: #4b6cb7;
                    background: linear-gradient(
                        135deg,
                        rgba(75, 108, 183, 0.1),
                        rgba(24, 40, 72, 0.1)
                    );
                    box-shadow: 0 8px 25px rgba(75, 108, 183, 0.2);
                }

                .content-thumbnail {
                    flex: 0 0 80px;
                    margin-right: 15px;

                    img {
                        width: 100%;
                        height: 80px;
                        object-fit: cover;
                        border-radius: 8px;
                    }
                }

                .content-info {
                    flex: 1;

                    .content-title {
                        font-size: 1.1rem;
                        font-weight: 600;
                        margin: 0 0 8px 0;
                        color: #333;
                    }

                    .content-excerpt {
                        font-size: 0.95rem;
                        color: #666;
                        margin: 0 0 12px 0;
                        line-height: 1.5;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                    }

                    .content-meta {
                        display: flex;
                        gap: 15px;

                        .content-date,
                        .content-category {
                            font-size: 0.85rem;
                            color: #999;
                        }
                    }
                }
            }
        }

        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 20px;
            margin-top: 20px;
            border-top: 1px solid #eee;

            .pagination-btn {
                padding: 10px 20px;
                background: #4b6cb7;
                color: white;
                border: none;
                border-radius: 8px;
                cursor: pointer;
                font-weight: 500;
                transition: all 0.2s ease;

                &:hover:not(:disabled) {
                    background: #3a5ca9;
                    transform: translateY(-2px);
                }

                &:disabled {
                    background: #ccc;
                    cursor: not-allowed;
                    transform: none;
                }
            }

            .pagination-info {
                font-size: 0.95rem;
                color: #666;
            }
        }
    }

    // 内容详情样式
    .content-detail-column {
        flex: 0 0 400px;

        .content-detail {
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;

            .detail-header {
                margin-bottom: 25px;
                padding-bottom: 20px;
                border-bottom: 1px solid #eee;

                .detail-title {
                    font-size: 1.8rem;
                    font-weight: 700;
                    margin: 0 0 15px 0;
                    color: #333;
                    line-height: 1.3;
                }

                .detail-meta {
                    display: flex;
                    gap: 20px;

                    .detail-date,
                    .detail-category,
                    .detail-author {
                        font-size: 0.95rem;
                        color: #666;
                    }
                }
            }

            .detail-image {
                margin-bottom: 25px;
                border-radius: 12px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: auto;
                    display: block;
                }
            }

            .detail-content {
                flex: 1;
                line-height: 1.7;
                color: #444;

                h3 {
                    font-size: 1.4rem;
                    margin: 1.5rem 0 1rem 0;
                    color: #333;
                }

                p {
                    margin: 1rem 0;
                }

                ul,
                ol {
                    margin: 1rem 0;
                    padding-left: 1.5rem;
                }

                li {
                    margin-bottom: 0.5rem;
                }
            }

            .detail-actions {
                display: flex;
                gap: 15px;
                padding-top: 25px;
                margin-top: 25px;
                border-top: 1px solid #eee;

                .action-btn {
                    padding: 12px 20px;
                    border-radius: 8px;
                    border: none;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.2s ease;

                    &.edit-btn {
                        background: #4caf50;
                        color: white;

                        &:hover {
                            background: #45a049;
                            transform: translateY(-2px);
                        }
                    }

                    &.delete-btn {
                        background: #f44336;
                        color: white;

                        &:hover {
                            background: #d32f2f;
                            transform: translateY(-2px);
                        }
                    }
                }
            }
        }

        .no-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #999;

            .no-content-icon {
                font-size: 4rem;
                margin-bottom: 20px;
            }

            h3 {
                font-size: 1.5rem;
                margin: 0 0 10px 0;
                color: #666;
            }

            p {
                font-size: 1rem;
                margin: 0;
            }
        }
    }

    // 移动端适配
    @media (max-width: 768px) {
        padding: 10px;

        .page-header {
            margin-bottom: 20px;

            .page-title {
                font-size: 2rem;
            }

            .page-subtitle {
                font-size: 1rem;
            }
        }

        .main-content {
            flex-direction: column;
            height: auto;
            gap: 15px;
        }

        .column {
            padding: 15px;

            .column-header {
                .close-btn {
                    display: block;
                }
            }
        }

        .category-column,
        .content-list-column,
        .content-detail-column {
            flex: none;
            height: 70vh;
        }

        .mobile-hidden {
            display: none;
        }

        .mobile-navigation {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            backdrop-filter: blur(10px);

            .nav-btn {
                flex: 1;
                padding: 15px;
                border: none;
                background: transparent;
                color: #666;
                font-size: 0.9rem;
                font-weight: 500;
                transition: all 0.2s ease;

                &.active {
                    color: #4b6cb7;
                    background: rgba(75, 108, 183, 0.1);
                    font-weight: 600;
                }
            }
        }
    }

    @media (max-width: 480px) {
        padding: 5px;

        .page-header {
            .page-title {
                font-size: 1.7rem;
            }
        }

        .column {
            padding: 12px;
        }

        .column-header h2 {
            font-size: 1.2rem;
        }

        .content-list-column {
            .search-bar {
                .search-input {
                    padding: 12px 15px;
                    font-size: 0.9rem;
                }
            }

            .content-item {
                .content-thumbnail {
                    flex: 0 0 60px;

                    img {
                        height: 60px;
                    }
                }

                .content-info {
                    .content-title {
                        font-size: 1rem;
                    }

                    .content-excerpt {
                        font-size: 0.9rem;
                    }
                }
            }
        }

        .content-detail-column {
            .detail-header {
                .detail-title {
                    font-size: 1.5rem;
                }
            }
        }
    }
}
</style>
